.page {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 100%;
}

.header {
  z-index: 1;
}

.main-header {
  display: -ms-flexbox;
    display: flex;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    -ms-flex-align: center;
    align-items: center;
    height: 60px;
    width: 100%;
    background-color: #f9f8f2;
}

.container {
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  height: 400px;
}

.sidebar {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: 300px;
  max-width: 300px;
  border-right: 1px solid #e6e6e6;
  background-color: #fafafa;
  background-color: #ffffff;
  padding: 20px;
  overflow-y: auto;
  overflow-x: hidden;
}

.docs {
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
}

#content {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background-color: white;
  -moz-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 70px 40px 60px;
}

.reaction-nav {
  min-height: 70px;
  background-color: #ffffff;
  padding: 0 40px;
  display: -moz-flex;
  display: -ms-flexbox;
  display: -ms-flex;
  display: flex;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  z-index: 1000;
  position: relative;
}

.logo {
  vertical-align: middle;
}

.reaction-nav-group {
  min-height: 70px;
  display: -moz-flex;
  display: -ms-flexbox;
  display: -ms-flex;
  display: flex;
  -moz-align-items: center;
  -ms-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.reaction-nav-header {
  flex: 0 1 auto;
}

.reaction-nav-links {
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -moz-flex: 1 0 auto;
  -ms-flex: 1 0 auto;
  height: 100%;
}

.reaction-nav-link {
  display: -moz-flex;
display: -ms-flexbox;
display: -ms-flex;
display: flex;
-moz-align-items: center;
-ms-align-items: center;
-ms-flex-align: center;
align-items: center;
margin: 0 2em 0 0;
height: 70px;
color: #052a4e;
text-transform: uppercase;
font-size: .75rem;
font-weight: bold;
position: relative;
letter-spacing: 0.05em;
text-decoration: none;
}

.main-header {
  height: 60px;
  width: 100%;
  background-color: #f9f8f2;
}

.readme h1 {
  margin: 0;
  color: #052a4e;
  font-size: 41.6px;
}

.reaction-btn {
  background-color: #a7edff;
  border: 0;
  margin-left: 1.5rem;
  border-radius: 35px;
  color: #052a4e;
  display: inline-block;
  font-size: .75rem;
  font-weight: bold;
  letter-spacing: 1.2px;
  line-height: 18px;
  padding: 15px 66px 15px 27px;
  text-decoration: none;
  text-transform: uppercase;
  position: relative;
  cursor: pointer;
  outline: none;
  transition: 0.24s ease-in-out background-color;
}

.btn__arrow {
  position: absolute;
  right: 2.25em;
  top: 50%;
  transition: 0.24s ease-in-out right;
}

.btn__arrow::before {
  content: '';
display: block;
position: absolute;
right: 0px;
top: -1px;
height: 2px;
width: 18px;
background-color: #052a4e;
}

.btn__arrow::after {
  content: '';
display: block;
border-right: 2px solid #052a4e;
border-bottom: 2px solid #052a4e;
width: 12px;
height: 12px;
position: absolute;
bottom: -6px;
right: 0px;
transform: rotate(-45deg);
}
